<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东快速购物导航</title>
    <style>
        .floor {
            position: fixed; /*固定定位*/
            top: 50%; /*Y坐标*/
            right: 5%; /*X坐标*/
            font-size: 40px; /*字体大小*/
        }
        .floor a{
            display: block; /*块级元素*/
            text-decoration: none; /*无下划线*/
            color: red; /*超链接文本颜色*/
            border: 1px solid red;/*设置细边框*/
            width: 60px;/*宽度*/
            height: 60px; /*高度*/
            border-radius: 50%; /*圆*/
            text-align: center; /*文本居中*/
            font-size:28px; /*字体大小*/
            line-height: 60px; /*垂直居中对齐*/
            font-weight: 700; /*粗体*/
            margin-bottom: 10px; /*下外边距 10px*/
        }

    </style>
</head>
<body>
   <div id="all">
       <p class="floor">
           <a href="#f1">F1</a>
           <a href="#f2">F2</a>
           <a href="#f3">F3</a>
           <a href="#f4">F4</a>
       </p>
       <div>
           <img src="images/img1.png">
       </div>
       <div>
           <a id="f1"></a>
           <img src="images/img2.png">
       </div>
       <div>
           <a id="f2"></a>
           <img src="images/img3.png">
       </div>
      <div>
          <a id="f3"></a>
          <img src="images/img4.png">
      </div>
      <div>
          <a id="f4"></a>
          <img src="images/img5.png">
      </div>
   </div>

</body>
</html>